<template>
  <a-modal v-model="visible" title="您想要问什么？" :footer="null" :mask="false" wrapClassName="modalStyle"
    :dialog-style="{ bottom: '170px', position: 'fixed', right: '6px', zIndex: 9999 }">
    <div>
      <div v-if="question" class="questionWrap">{{ question }}</div>
      <div v-if="answerLoading" style="text-align: center;"><a-spin /></div>
      <div v-if="answer" class="answerWrap">
        <div>{{ answer }}</div>
      </div>
    </div>
    <a-textarea v-model="questionContent" class="mt10 mb10"></a-textarea>
    <div class="plainWrap" @click="submitQuestion"><i class="iconfont icon-fasong"></i></div>
  </a-modal>
</template>

<script>
import { mapState } from 'vuex'
// import vueSeamlessScroll from 'vue-seamless-scroll'
import { aiPost } from '@/api/config'
export default {
  name: 'imgs',
  // components: { vueSeamlessScroll },
  props: ['visible'],
  data () {
    return {
      answerLoading: false,
      questionContent: '',
      question: '',
      answer: ''
    }
  },
  mounted () {

  },
  computed: {
    ...mapState({
    })
  },
  methods: {
    async submitQuestion () {
      this.answerLoading = true
      this.question = this.questionContent
      this.questionContent = ''
      // TODO 此处可放开
      // let res = await aiPost({ context: this.question })
      // if (res.code === 200) {
      //   this.answerLoading = false
      //   this.answer = res.data
      // }
      setTimeout(() => {
        this.answerLoading = false
        this.answer = '智能网联汽车（Intelligent Connected Vehicle，简称ICV）是一种高度集成车联网技术和智能汽车技术的新型交通工具。这种汽车装备有先进的车载传感器、控制器、执行器等装置，并融合了现代通信与网络技术，使其能够与人、其他车辆、道路基础设施以及云端服务器进行实时的信息交换和共享。'
      }, 2000)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../styles/var.styl'
:deep .modalStyle
  .ant-modal-header
    background: #f7f8fc
  .ant-modal-content
    position fixed
    bottom 170px
    right 6px
    z-index 9999
    width 520px
    background: #f7f8fc
.plainWrap
  width 40px
  height 40px
  border-radius 20px
  display flex
  justify-content center
  align-items center
  background: linear-gradient(48deg, #615ced -2%, #534ad1 93%)
  float: right
  margin-bottom: 15px
  cursor pointer
  .icon-fasong
    font-size 20px
    color #fff
.questionWrap
  background-color: #e0dfff;
  border-radius: 12px;
  line-height: 24px;
  max-width: 100%;
  padding: 12px 16px;
  margin-bottom 10px
.answerWrap
  max-height: 360px;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
  min-height: 60px;
  overflow-y: auto;
  padding: 16px;
  position: relative;
</style>
